<template>
  <div style="position: relative">
    <div class="page-menu">
      <div
        :class="['menu-item', curMenu == menu.value ? 'selected' : '']"
        v-for="(menu, index) in menus"
        :key="index"
        @click="menuIntoView(menu.value)"
      >
        <span>{{ menu.label }}</span>
      </div>
    </div>
    <el-scrollbar style="height: 100%; position: relative; margin-left: 220px">
      <el-row>
        <el-button
          type="primary"
          size="default"
          plain
          @click="preview"
          style="
            background-color: #3cc393;
            border-color: #3cc393;
            color: #fff;
            margin-left: auto;
            margin-bottom: 10px;
          "
        >预览</el-button
        >
      </el-row>
      <el-row>
        <el-col>
          <el-card id="searchColumns">
            <div class="table-title">查询字段</div>
            <avue-crud
              ref="crudSearch"
              v-model:page="pageSearch"
              :option="searchColumnsOptions"
              :data="formPageData.searchColumnsData"
              :table-loading="tableLoading"
              :span-method="handleSearchSpanMethod"
              @row-update="searchRowUpdate"
              @row-save="searchRowInsert"
            >
              <template #isSearchColumn="scope">
                <el-switch
                  v-model="scope.row.isSearchColumn"
                  active-color="#3CC393"
                  active-value="Y"
                  inactive-value="N"
                />
              </template>
              <template #searchSort="scope">
                <el-input-number
                  v-model="scope.row.searchSort"
                  style="width: 100%"
                  controls-position="right"
                  :min="0"
                  :disabled="scope.row.$index == 0"
                />
              </template>
            </avue-crud>
          </el-card>
          <el-card id="operateButtons">
            <div class="table-title">
              操作按钮
              <!-- <el-button
                  type="primary"
                  plain
                  @click="customBtn"
                  style="background-color: #3CC393; border-color: #3CC393;color: #FFF;margin-left: 10px"
                  >自定义按钮</el-button
                > -->
              <custom-btn-setting
                :value="curEditCustomBtn"
                style="margin-top: 10px; width: 112px"
                :listSetting="true"
                :options="options"
                ref="customBtn"
                @submit="handleCustomBtnSubmit"
                @click="handleAddCustomBtn"
              />
            </div>
            <avue-crud
              ref="crudOperateButtons"
              :option="operateButtonsOptions"
              :data="formPageData.operateButtonsData"
              :table-loading="tableLoading"
            >
              <!-- isEnable -->
              <template #isEnable="scope">
                <el-switch
                  v-model="scope.row.isEnable"
                  active-color="#3CC393"
                  active-value="Y"
                  inactive-value="N"
                />
              </template>
              <template #menu="scope">
                <el-button
                  v-if="scope.row.position"
                  link
                  icon="el-icon-edit"
                  @click="handleEditCustomBtn(scope.row)"
                >
                  编 辑
                </el-button>
                <span v-else>/</span>
              </template>
            </avue-crud>
          </el-card>
          <el-card id="tableColumns">
            <div class="table-title">列表字段</div>
            <avue-crud
              ref="crudTable"
              v-model:page="pageTable"
              :option="tableColumnsOptions"
              :data="formPageData.tableColumnsData"
              :table-loading="tableLoading"
              :span-method="handleTableSpanMethod"
              @row-update="tableRowUpdate"
              @row-save="tableRowInsert"
            >
              <template #isListShow="scope">
                <el-switch
                  v-model="scope.row.isListShow"
                  active-color="#3CC393"
                  active-value="Y"
                  inactive-value="N"
                />
              </template>
              <template #sort="scope">
                <el-input-number
                  v-model="scope.row.sort"
                  style="width: 100%"
                  controls-position="right"
                  :min="0"
                  :disabled="scope.row.$index == 0"
                />
              </template>
              <template #isFixed="scope">
                <el-switch
                  v-model="scope.row.isFixed"
                  active-color="#3CC393"
                  active-value="Y"
                  inactive-value="N"
                />
              </template>
              <template #isFixedHeader>
                <span style="margin-right: 8px">固定状态</span>
                <el-tooltip content="固定表头设置仅支持从表格开头/尾端选择连续字段进行设置">
                  <el-icon><WarningFilled /></el-icon>
                  <!-- <i class="el-icon-warning"></i> -->
                </el-tooltip>
              </template>
            </avue-crud>
          </el-card>
        </el-col>
        <!-- <el-col :span="6" style="padding: 0 20px">
        <el-card>
          <el-button type="primary" @click="saveBtn">保存</el-button>
          <el-tabs v-model="activeName">
            <el-tab-pane label="查询字段" name="search">
              <el-col
                v-for="(item, index) in searchColumnsSwitch"
                :key="index"
                style="margin-bottom: 10px"
              >
                <el-divider
                  v-if="
                    index > 1 &&
                    item.formEntityName !==
                      searchColumnsSwitch[index - 1].formEntityName
                  "
                >
                </el-divider>
                <label
                  v-if="
                    index === 0 ||
                    item.formEntityName !==
                      searchColumnsSwitch[index - 1].formEntityName
                  "
                  style="margin-bottom: 10px; display: block"
                >
                  实体描述：{{ item.formEntityDesc }}
                </label>
                <el-switch
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  "
                  v-model="item.isSearchColumn"
                  :inactive-text="item.formEntityColumnDesc"
                  active-color="#13ce66"
                  active-value="Y"
                  inactive-value="N"
                  @change="searchColumnsSwitchChange(item)"
                >
                </el-switch>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="列表字段" name="table">
              <el-col
                v-for="(item, index) in tableColumnsSwitch"
                :key="index"
                style="margin-bottom: 10px"
              >
                <el-divider
                  v-if="
                    index > 1 &&
                    item.formEntityName !==
                      tableColumnsSwitch[index - 1].formEntityName
                  "
                >
                </el-divider>
                <label
                  v-if="
                    index === 0 ||
                    item.formEntityName !==
                      tableColumnsSwitch[index - 1].formEntityName
                  "
                  style="margin-bottom: 10px; display: block"
                >
                  实体描述：{{ item.formEntityDesc }}
                </label>
                <el-switch
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  "
                  v-model="item.isListShow"
                  :inactive-text="item.formEntityColumnDesc"
                  active-color="#13ce66"
                  active-value="Y"
                  inactive-value="N"
                  @change="tableColumnsSwitchChange(item)"
                >
                </el-switch>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="操作按钮" name="operateButtons">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 10px 0;
                "
              >
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-plus"
                  plain
                  @click="customBtn"
                  >自定义按钮</el-button
                >
              </div>
              <el-col
                v-for="(item, index) in operateButtonsSwitch"
                :key="index"
                style="margin-bottom: 10px"
              >
                <el-switch
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  "
                  v-model="item.isEnable"
                  :inactive-text="item.buttonName"
                  active-color="#13ce66"
                  active-value="Y"
                  inactive-value="N"
                  @change="operateButtonsSwitchChange(item)"
                >
                </el-switch>
              </el-col>
            </el-tab-pane>
          </el-tabs>
          <el-col>
            <el-col v-for="(item,index) in searchColumnsSwitch" :key="index" style="margin-bottom: 10px">
              <el-switch
                style="display:flex;align-items: center;justify-content: space-between;"
                v-model="item.value"
                :inactive-text="item.key"
                active-color="#13ce66"
                @change="searchColumnsSwitchChange(item)">
              </el-switch>
            </el-col>
          </el-col>
        </el-card>
      </el-col> -->
      </el-row>

      <!-- 自定义按钮 -->
      <drag-dialog
        modal
        append-to-body
        custom-class="permiDialog"
        v-model="customVisible"
        :before-close="cancel"
        title="新增自定义操作按钮"
      >
        <el-form :model="form" label-position="right" label-width="150px">
          <el-form-item label="按钮名称：">
            <el-input link v-model="form.buttonName" width="50%" />
          </el-form-item>
          <el-form-item label="url：">
            <el-input link v-model="form.buttonUrl" width="50%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit(form)">确认</el-button>
          </span>
        </template>
      </drag-dialog>
      <el-drawer title="预览" v-model="previewVisible" direction="btt" append-to-body size="90%">
        <avue-crud :option="crudOptions" :data="previewData">
          <template #menuLeft>
            <add-button v-if="operateButtons.addBtn" style="background-color: #3cc393" />
            <delete-button v-if="operateButtons.delBtn" style="background-color: #fe5151" />
            <import-button v-if="operateButtons.importBtn" style="background-color: #3cc393" />
            <export-button v-if="operateButtons.exportBtn" style="background-color: #3cc393" />
            <template v-for="(btn, index) in customBtnList">
              <custom-button
                :key="index"
                ref="customBtn"
                v-bind="btn"
                v-if="btn.position == 'outer'"
              />
            </template>
            <!-- <el-button
            type="success"
            size="mini"
            v-if="operateButtons.customBtn"
            style="background-color: #3cc393; border: none"
            >{{ buttonName }}</el-button
          > -->
          </template>
        </avue-crud>
      </el-drawer>
    </el-scrollbar>
  </div>
</template>

<script>
// import 'sortablejs'
import { searchPage } from '@code/api/code/form/model'
import { searchList } from '@code/api/code/page'
import fieldTypeMap from './fieldTypeMap'
import customBtnSetting from '@code/components/anvil-code-low-design/views/avue-form-design/config/extend/customButton/customBtnSetting.vue'
import customButton from '@code/components/anvil-code-low-common/components/customButton/customButton.vue'

export default {
  name: 'FormPage',
  components: { customBtnSetting, customButton },
  props: {
    formModelVersionId: {
      type: String,
      require: true
    },
    pageVersionId: {
      type: String,
      require: true
    },
    formPageData: {
      type: Object,
      require: true
    },
    sceneId: {
      type: String,
      default: ''
    },
    scenarioType: {
      type: Number,
      default: 1
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localFormPageData: this.formPageData,
      customBtnList: [],
      testData: {
        buttonName: '自定义',
        buttonCode: '',
        isEnable: 'Y',
        position: 'inner',
        styles: {
          type: 'primary',
          color: '',
          icon: ''
        },
        condition: {
          conditionType: 'all',
          conditions: []
        },
        feature: {
          type: '',
          url: '',
          params: {
            headers: [],
            body: []
          }
        }
      },
      activeName: 'search',
      pageSearch: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      pageTable: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      searchColumnsSwitch: [],
      tableColumnsSwitch: [],
      operateButtonsSwitch: [],
      searchColumnsOptions: {
        //  header: false,
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        // sortable: true, // 可拖拽
        menuAlign: 'center',
        align: 'center',
        addBtn: true,
        editBtn: true,
        delBtn: false,
        emptyBtn: false,
        columnBtn: false,
        searchMenuSpan: 3,
        searchSize: 'mini',
        menuWidth: 200,
        keyId: 'id',
        column: [
          {
            label: '实体描述',
            prop: 'formEntityDesc',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '实体名称',
            prop: 'formEntityName',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '字段',
            prop: 'formEntityColumnDesc',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '名称',
            prop: 'formEntityColumnName',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '类型',
            prop: 'operatorNames',
            search: false,
            type: 'select',
            multiple: false,
            dicData: [
              {
                label: '相等',
                value: 'EQ'
              },
              {
                label: '不相等',
                value: 'NE'
              },
              {
                label: '大于',
                value: 'GT'
              },
              {
                label: '大于等于',
                value: 'GE'
              },
              {
                label: '小于',
                value: 'LT'
              },
              {
                label: '小于等于',
                value: 'LE'
              },
              {
                label: '左右模糊查询',
                value: 'LIKE'
              },
              {
                label: '左模糊查询',
                value: 'LEFT_LIKE'
              },
              {
                label: '右模糊查询',
                value: 'RIGHT_LIKE'
              },
              {
                label: '区间',
                value: 'BETWEEN'
              }
            ],
            // dicData: [{
            //   label: '模糊查询',
            //   value: 0
            // }, {
            //   label: '精确查询',
            //   value: 1
            // }],
            cell: true
          },
          {
            label: '排序',
            search: false,
            prop: 'searchSort',
            slot: true,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '展示状态',
            search: false,
            prop: 'isSearchColumn',
            slot: true,
            editDisabled: false,
            editDisplay: true,
            type: 'select',
            multiple: false,
            dicData: [
              { label: '是', value: 'Y' },
              { label: '否', value: 'N' }
            ]
          }
        ]
      },
      operateButtonsOptions: {
        header: false,
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        // sortable: true, // 可拖拽
        menuAlign: 'center',
        align: 'center',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        emptyBtn: false,
        columnBtn: false,
        searchMenuSpan: 3,
        searchSize: 'mini',
        // menuWidth: 200,
        menu: true,
        keyId: 'id',
        column: [
          {
            label: '名称',
            prop: 'buttonName',
            search: false,
            editDisabled: true,
            editDisplay: true
          },
          {
            label: '编码(请求地址)',
            prop: 'buttonCode',
            search: false,
            editDisabled: true,
            editDisplay: true
          },
          {
            label: '状态',
            prop: 'isEnable',
            slot: true,
            search: false,
            editDisabled: true,
            editDisplay: true
            // dicData: [
            //   {
            //     label: "启用",
            //     value: "Y",
            //   },
            //   {
            //     label: "禁用",
            //     value: "N",
            //   },
            // ],
          }
        ]
      },
      tableColumnsOptions: {
        // cellBtn:true,
        // header: false,
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        // sortable: true, // 可拖拽
        menuAlign: 'center',
        addBtn: true,
        align: 'center',
        editBtn: true,
        delBtn: false,
        emptyBtn: false,
        columnBtn: false,
        searchMenuSpan: 3,
        searchSize: 'mini',
        menuWidth: 200,
        column: [
          {
            label: '实体描述',
            prop: 'formEntityDesc',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '实体名称',
            prop: 'formEntityName',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '字段',
            prop: 'formEntityColumnDesc',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '名称',
            prop: 'formEntityColumnName',
            search: false,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '宽度',
            placeholder: '请输入数值(%,px)',
            prop: 'columnLength',
            search: false,
            type: 'select',
            allowCreate: false,
            filterable: true,
            dicData: [
              {
                label: '自动适应',
                value: 0
              }
            ],
            cell: true
          },
          {
            label: '排序',
            search: false,
            prop: 'sort',
            slot: true,
            editDisabled: false,
            editDisplay: true
          },
          {
            label: '固定状态',
            search: false,
            prop: 'isFixed',
            slot: true,
            editDisabled: false,
            editDisplay: true,
            type: 'select',
            multiple: false,
            dicData: [
              { label: '是', value: 'Y' },
              { label: '否', value: 'N' }
            ]
          },
          {
            label: '展示状态',
            search: false,
            prop: 'isListShow',
            slot: true,
            editDisabled: false,
            editDisplay: true,
            type: 'select',
            multiple: false,
            dicData: [
              { label: '是', value: 'Y' },
              { label: '否', value: 'N' }
            ]
          }
        ]
      },
      initialTableData: [],
      initialTableData2: [],
      formParams: {},
      list: [],
      list2: [],
      tabIndex: 0,
      customVisible: false,
      form: {
        buttonName: '',
        buttonUrl: ''
      },
      permissionInfo: {
        key: '',
        userPropertyName: 'DEPT_ID',
        isCas: true
      },
      perlist: {},
      previewVisible: false,
      operateButtons: {},
      previewData: [],
      crudOptions: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        importBtn: false,
        exportBtn: false,
        printBtn: false,
        customBtn: false,
        updateBtn: false,
        dialogDrag: true,
        selection: true,
        dialogEscape: false,
        searchMenuSpan: 4,
        column: []
      },
      menus: [
        {
          label: '查询字段',
          value: 'searchColumns'
        },
        {
          label: '操作按钮',
          value: 'operateButtons'
        },
        {
          label: '列表字段',
          value: 'tableColumns'
        }
        // {
        //   label: "表头设计",
        //   value: "tableHeader",
        // },
        // {
        //   label: '表格行配置',
        //   value: 'tableRow'
        // }
      ],
      curMenu: 'searchColumns',
      alignOptions: [
        {
          label: '居左',
          icon: '',
          value: 'left'
        },
        {
          label: '居中',
          icon: '',
          value: 'center'
        },
        {
          label: '居右',
          icon: '',
          value: 'right'
        }
      ],
      curCustomBtnType: '', // 当前自定义按钮编辑状态 add 新增  edit 编辑
      curEditCustomBtn: undefined, // 当前编辑的自定义按钮
      curEditCustomBtnIdx: 0 // 当前编辑的自定义按钮的序号
    }
  },
  watch: {
    formPageData: {
      handler(newVal) {
        this.localFormPageData = newVal
      },
      deep: true
    },
    localFormPageData: {
      handler(newVal) {
        this.$emit('update:formPageData', newVal)
      },
      deep: true
    },
    pageVersionId(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.loadData()
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (!this.pageVersionId) {
        return
      }
      searchList(this.pageVersionId).then((res) => {
        this.searchColumnsSwitch = res.data.searchColumns || []
        this.initSearchFieldMap()
        // this.searchColumnsSwitch.forEach((e) => (e.isSearchColumn = "Y"));
        this.searchColumnsSwitchChange()

        this.tableColumnsSwitch = res.data.tableColumns || []
        // this.tableColumnsSwitch.forEach((e) => (e.isSearchColumn = "Y"));
        this.tableColumnsSwitchChange()

        this.operateButtonsSwitch = (res.data.operateButtons || []).map((btn) => {
          const { condition, feature, styles } = btn
          return {
            ...btn,
            condition: condition ? JSON.parse(condition) : null,
            feature: feature ? JSON.parse(feature) : null,
            styles: styles ? JSON.parse(styles) : null
          }
        })
        this.operateButtonsSwitchChange()

        // if (res.data.tableRowDomain) {
        //   this.localFormPageData.tableRow = res.data.tableRowDomain
        //   // this.$set(this.formPageData, 'tableRow', res.data.tableRowDomain)
        // }
      })
    },
    // 区别查询字段编辑和列表字段编辑，之前统一处理是不是有问题
    searchRowUpdate(form, index, done, loading) {
      this.localFormPageData.searchColumnsData[index] = form
      // this.$set(this.formPageData.searchColumnsData, index, form)
      setTimeout(() => {
        loading()
        //这个方法不知道哪来的，先注释
        // this.toGetChildData();
        done()
      }, 500)
    },
    searchRowInsert(form, done, loading) {
      this.localFormPageData.searchColumnsData.push(form)
      setTimeout(() => {
        loading()
        done()
      }, 500)
    },
    tableRowUpdate(form, index, done, loading) {
      this.localFormPageData.tableColumnsData[index] = form
      // this.$set(this.formPageData.tableColumnsData, index, form)
      setTimeout(() => {
        loading()
        //这个方法不知道哪来的，先注释
        // this.toGetChildData();
        done()
      }, 500)
    },
    tableRowInsert(form, done, loading) {
      this.localFormPageData.tableColumnsData.push(form)
      setTimeout(() => {
        loading()
        done()
      }, 500)
    },
    // handleDelete(row) {
    //   console.log(row);
    //   this.$confirm('是否确认删除ID为' + row.id, '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //   }).then(function () {
    //       return delScenes(row.id)
    // z  }).then(data => {
    //       this.$message.success('删除成功')
    //       this.getList(this.pageSearch)
    //   })
    // },
    searchColumnsSwitchChange(obj) {
      // this.formPageData.searchColumnsData = this.searchColumnsSwitch.filter(
      //   (e) => e.isSearchColumn === "Y"
      // );
      this.localFormPageData.searchColumnsData = this.searchColumnsSwitch
    },
    tableColumnsSwitchChange(obj) {
      // this.formPageData.tableColumnsData = this.tableColumnsSwitch.filter(
      //   (e) => e.isListShow === "Y"
      // );
      this.localFormPageData.tableColumnsData = this.tableColumnsSwitch
    },
    operateButtonsSwitchChange(obj) {
      // this.formPageData.operateButtonsData = this.operateButtonsSwitch.filter(
      //   (e) => e.isEnable === "Y"
      // );
      this.localFormPageData.operateButtonsData = [...this.operateButtonsSwitch]
    },
    customBtn() {
      this.customVisible = true
    },
    cancel() {
      this.customVisible = false
    },
    submit(form) {
      this.operateButtonsSwitch.push({
        buttonName: form.buttonName,
        buttonCode: form.buttonUrl,
        isEnable: 'Y'
      })
      this.operateButtonsSwitchChange()
      this.cancel()
    },
    // 表格单元格相同实体合并
    handleTableSpanMethod({ row, column, rowIndex, columnIndex }) {
      const arr = this.getSpan(this.formPageData.tableColumnsData)
      if (columnIndex === 1 || columnIndex === 2) {
        const { row, col } = arr[rowIndex]
        return {
          rowspan: row,
          colspan: col
        }
      }
    },
    handleSearchSpanMethod({ row, column, rowIndex, columnIndex }) {
      const arr = this.getSpan(this.formPageData.searchColumnsData)
      if (columnIndex === 1 || columnIndex === 2) {
        const { row, col } = arr[rowIndex]
        return {
          rowspan: row,
          colspan: col
        }
      }
    },
    getSpan(list) {
      const newArr = []
      const obj = {}
      for (let i = 0; i < list.length; i++) {
        if (i === 0) {
          obj.row = 1
          obj.col = 1
          newArr.push(obj)
        } else {
          if (list[i].formEntityName === list[i - 1].formEntityName) {
            newArr.push({ row: 0, col: 0 })
            const index = list.findIndex((item) => {
              return item.formEntityName === list[i - 1].formEntityName
            })
            newArr[index].row++
          } else {
            newArr.push({ row: 1, col: 1 })
          }
        }
      }
      return newArr
    },
    // 初始化查询字段的映射类型
    initSearchFieldMap() {
      this.searchColumnsSwitch.forEach((col) => {
        if (!col.operatorNames) {
          col.operatorNames = fieldTypeMap[col.dataType]
        }
      })
    },
    // 添加自定义按钮
    addCustomBtn(data) {
      this.operateButtonsSwitch.push({
        ...data,
        buttonCode: data.feature.url,
        isEnable: 'Y'
      })
      this.operateButtonsSwitchChange()
    },
    handleAddCustomBtn(e) {
      e.stopPropagation()
      this.curCustomBtnType = 'add'
      this.curEditCustomBtn = undefined
      this.$nextTick(() => {
        this.$refs.customBtn.openDialog()
      })
    },
    // 编辑自定义按钮
    updateCustomBtn(index, data) {
      const btnData = {
        ...data,
        buttonCode: data.feature.url
      }
      this.operateButtonsSwitch.splice(index, 1, btnData)
      // this.$set(this.operateButtonsSwitch, index, btnData);
      this.operateButtonsSwitchChange()
    },
    handleEditCustomBtn(row) {
      this.curCustomBtnType = 'edit'
      this.curEditCustomBtnIdx = row.$index
      this.curEditCustomBtn = row
      // this.$set(this, 'curEditCustomBtn', row)
      this.$nextTick(() => {
        this.$refs.customBtn.openDialog()
      })
    },
    handleCustomBtnSubmit(data) {
      if (this.curCustomBtnType == 'add') {
        this.addCustomBtn(data)
      } else {
        this.updateCustomBtn(this.curEditCustomBtnIdx, data)
      }
    },
    // 预览功能
    preview() {
      this.handlePreviewData()
      this.previewVisible = true
    },
    handlePreviewData() {
      this.crudOptions.column = []
      // 查询列和列表展示列
      if (this.formPageData.tableColumnsData && this.formPageData.tableColumnsData.length > 0) {
        // 默认第一个为主表实体
        const mainEntityName = this.formPageData.tableColumnsData[0].formEntityName
        for (let index = 0; index < this.formPageData.tableColumnsData.length; index++) {
          const column = this.formPageData.tableColumnsData[index]
          // 暂时处理为只展示主表相关字段
          if (
            // 要只展示主表字段
            column.isListShow == 'Y' &&
            column.formEntityName == mainEntityName
          ) {
            const searchCol = this.formPageData.searchColumnsData.find(
              (item) => item.formEntityColumnName == column.formEntityColumnName
            )
            const obj = {
              label: column.formEntityColumnDesc,
              prop: column.formEntityColumnName,
              searchRange: searchCol.operatorNames == 'BETWEEN' ? true : false,
              search: searchCol.isSearchColumn === 'Y',
              searchType:
                column.uiAdvise == 'date' ? undefined : this.searchTypeFormat(column.uiAdvise),
              type: column.uiAdvise == 'date' ? 'datetime' : undefined,
              overHidden: true,
              valueFormat: column.uiAdvise == 'date' ? 'yyyy-MM-dd' : undefined,
              operatorNames: column.operatorNames
            }
            this.crudOptions.column.push(obj)
          }
        }
      }
      // 操作按钮
      if (this.formPageData.operateButtonsData && this.formPageData.operateButtonsData.length > 0) {
        const buttons = this.formPageData.operateButtonsData.filter((e) => 'Y' === e.isEnable)
        this.customBtnList = []
        for (let index = 0; index < buttons.length; index++) {
          const btn = buttons[index]
          switch (btn.buttonCode) {
            case 'insert':
              this.operateButtons.addBtn = true
              break
            case 'update':
              this.operateButtons.editBtn = true
              break
            case 'delete':
              this.operateButtons.delBtn = true
              break
            case 'view':
              this.operateButtons.viewBtn = true
              break
            case 'import':
              this.operateButtons.importBtn = true
              break
            case 'export':
              this.operateButtons.exportBtn = true
              break
            case 'print':
              this.operateButtons.printBtn = true
              break
            default:
              // this.operateButtons.customBtn = true;
              // this.buttonName = btn.buttonName;
              // this.buttonCode = btn.buttonCode;
              for (let key in btn) {
                if (key.includes('$')) {
                  delete btn[key]
                }
              }
              this.customBtnList.push({
                ...btn,
                clickBanned: true
              })
              break
          }
        }
      }
    },
    searchTypeFormat(type) {
      switch (type) {
        case 'varchar':
          return 'string'
        case 'number':
          return 'input'
        case 'select':
          return 'select'
        case 'radio':
          return 'select'
        case 'checkbox':
          return 'select'
      }
    },
    // 点击跳转
    menuIntoView(value) {
      this.curMenu = value
      const el = document.getElementById(value)
      // console.log('el',el)
      if (el) {
        el.scrollIntoView({ behavior: 'smooth' })
      }
    },
    handleAlignSelect(value) {
      this.localFormPageData.tableRow.align = value
      // this.$set(this.formPageData.tableRow, 'align', value)
    }
  }
}
</script>

<style lang="scss">
.el-card {
  margin-bottom: 20px !important;
}
.el-card__body {
  width: 90% !important;
  margin: auto;
}
.el-switch__label--left {
  // width: 80% !important;
}
.el-switch__label * {
  line-height: 1;
  font-size: 14px;
  display: inline-block;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  width: 100% !important;
}
.permiDialog .drag-dialog__body {
  height: auto !important;
}
</style>
<style lang="scss" scoped>
.table-title {
  width: 90%;
  color: #363d62;
  font-weight: bold;
  font-size: 20px;
  margin: 10px auto;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.heads {
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.page-menu {
  position: fixed;
  width: 200px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  // height: 500px;
  // background-color: #409eff;

  .menu-item {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #e6ebf5;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;

    &:last-of-type {
      border-bottom: 0px solid #dcdcdc;
    }

    &:hover {
      background-color: #e3fff5;
      color: #3cc393;
    }
  }

  .selected {
    background-color: #e3fff5;
    color: #3cc393;
  }
}

.align-content {
  display: flex;
  gap: 50px;
  cursor: pointer;

  .align-item {
    width: 100px;
    height: 100px;
    background-color: #dcdcdc;
  }

  .align-selected {
    outline: 2px solid #3cc393;
  }
}
</style>
